<!--
 * @Date: 2024-03-11 16:43:03
 * @Autor: 叶世超
 * @LastEditors: 叶世超 yesc163@163.com
 * @LastEditTime: 2024-06-13 10:42:00
 * @FilePath: \reslib-web\src\views\knowledge\knowledgeBase\importForm.vue
 * @Description: 描述
 * @version: 版本
-->
<template>
  <Dialog v-model="dialogVisible" title="导入模板文件" width="600">
    <el-upload class="upload-demo" :http-request="determine" drag action="" :accept="accept()">
      <el-icon class="el-icon--upload"><upload-filled /></el-icon>
      <div class="el-upload__text">将文件拖到此处或 <em>单击以上传</em></div>
      <template #tip>
        <div class="el-upload__tip"></div>
      </template>
    </el-upload>
    <template #footer>
      <el-button @click="handleDownload" type="primary">下载EXCEL模板</el-button>
      <el-button @click="dialogVisible = false">取 消</el-button>
    </template>
  </Dialog>
</template>

<script lang="ts" setup>
import * as FormApi from '@/api/knowledge/character'
import { ref } from 'vue'
import { useRouter, useRoute } from 'vue-router'
const props = defineProps({
  activeName: String
})
const exp = reactive({
  pathUrl: import.meta.env.VITE_URL
})
const router = useRouter()
const route = useRoute()
const dialogVisible = ref(false) // 弹窗的是否展示
const accept = () => {
  return '.xlsx, .xls'
}
const handleDownload = () => {
  let url = exp.pathUrl+'/src/assets/template/knowledgeTemplateFile.xlsx'
  // 创建一个临时的<a>标签用于下载
  const downloadLink = document.createElement('a')
  downloadLink.href = url
  downloadLink.download = 'entityTemplateFile.xlsx' // 指定下载文件名
  document.body.appendChild(downloadLink)
  // 模拟点击下载链接
  downloadLink.click()
  // 清理临时DOM元素和对象URL
  document.body.removeChild(downloadLink)
  URL.revokeObjectURL(url)
}
// 弹窗确定
const determine = (param) => {
  let excelFormData = new FormData()
  excelFormData.append('templateFile', param.file) // 文件
  excelFormData.append('graphId', route.query.graphId) // 所属图谱id
  const params = excelFormData
  FormApi.uploadExcelAndInsertKnowledge(params).then((res) => (dialogVisible.value = false))
}
/** 打开弹窗 */
const open = async () => {
  dialogVisible.value = true
}
defineExpose({ open }) // 提供 open 方法，用于打开弹窗
</script>
